import React from 'react';
import MainUI from '../../components/layout/MainUI';
import styles2 from '../finance/css/dashboard.less';
import {connect} from 'dva';
import {
  Breadcrumb,
  Button,
  Col,
  Form,
  Input,
  Row,
  Icon,
  Card,
  message,
  Popconfirm,
  InputNumber,
  Tabs,
  Select,
} from 'antd';

const TabPane = Tabs.TabPane;
const FormItem = Form.Item;
const formItemLayout = {
  labelCol: {span: 6},
  wrapperCol: {span: 16},
};

class CustomerPay extends React.Component {

  state = {
    amount: 0.00,
    anonyAmount: 0.00,
    outAmount: 0.00,
    adminId: undefined,
    anonyAdminId: undefined,
    showAnonyPay: false,
    showOutPay: false,
    outComment:null,
  };
  search = () => {
    this.props.form.validateFieldsAndScroll((errors, values) => {
      if (errors) {

      } else {
        this.props.dispatch({
          type: 'charge/e_getPayCustomer',
          payload: values
        });
      }
      const state = this.state;
      state.amount = 0.00;
      state.anonyAmount = 0.00;
      state.outAmount = 0.00;
      state.adminId = undefined;
      state.anonyAdminId = undefined;
      this.setState(state);
    });
    if (this.props.admins.length < 1) {
      this.props.dispatch({
        type: 'charge/e_getMyAdmins'
      });
    }
  };

  handleReset = () => {
    this.props.form.resetFields();
  };

  render() {
    const adminselects = this.props.admins.map(admin => <Select.Option
      key={admin.id}>{admin.name + '  ' + admin.cellphone}</Select.Option>);
    return (
      <MainUI>
        <Breadcrumb style={{margin: '12px 0'}}>
          <Breadcrumb.Item>功能管理</Breadcrumb.Item>
          <Breadcrumb.Item> 门店管理</Breadcrumb.Item>
          <Breadcrumb.Item> 收银</Breadcrumb.Item>
        </Breadcrumb>
        <div style={{padding: 24, background: '#fff', minHeight: 360}}>
          <div className={styles2.salesCard}>
          <Tabs onChange={() => {
            if (this.props.admins.length < 1) {
              this.props.dispatch({
                type: 'charge/e_getMyAdmins'
              });
            }
            const state = this.state;
            state.amount = 0.00;
            state.anonyAmount = 0.00;
            state.adminId = undefined;
            state.anonyAdminId = undefined;
            state.outAmount = 0.00;
            this.setState(state);
          }} >
            <TabPane tab={<span style={{marginLeft: 5, fontSize: 18}}>会员收银</span>} key="customerPay">
              <Form className="ant-advanced-search-form">
                <Row>
                  <Col span={4}>
                    <FormItem {...formItemLayout} label='手机'>
                      {this.props.form.getFieldDecorator('cellphone', {
                        rules: [
                          {
                            message: "请输入手机号",
                            type: "string",
                            pattern: "^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\\d{8}$"
                          },
                        ],
                      })(
                        <Input placeholder="手机号" suffix={<Icon type='phone'/>}/>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={4}>
                    <FormItem {...formItemLayout} label='会员卡号'>
                      {this.props.form.getFieldDecorator('customerNo')(
                        <Input placeholder="会员卡号" suffix={<Icon type='card'/>}/>
                      )}
                    </FormItem>
                  </Col>
                  <Col span={4}>
                    <Button type="primary" style={{marginLeft: 8,}} icon="retweet" onClick={() => {
                      this.search();
                    }}>刷新</Button>
                    <span className="ant-divider"/>
                    <Button style={{marginTop: '3px'}} onClick={this.handleReset}>
                      清空
                    </Button>
                  </Col>
                </Row>
              </Form>
              {this.props.customer == undefined ? '' :
                <Row style={{
                  marginTop: '20px',
                  border: '1px solid #e9e9e9',
                  padding: '15px',
                  paddingTop: '40px',
                  paddingBottom: '70px'
                }}>
                  <Col span={4} >
                    <Card style={{width: "100%"}} bodyStyle={{padding: 0}}>
                      <div className="custom-card">
                        <h1 style={{
                          marginLeft: '10px',
                          color: '#108ee9',
                          padding: '5px'
                        }}> {this.props.customer.name}</h1>
                      </div>
                      <div className="custom-image">
                        <img alt="头像" width="100%" src={this.props.customer.photo==null?'/img/photo.jpg':this.props.customer.photo}/>
                      </div>
                    </Card>

                  </Col>
                  <Col span={5} offset={1}>
                    <FormItem {...formItemLayout} label="手机号">
                  <span style={{fontSize: 28}}>
                  {
                    this.props.customer.cellphone
                  }
                  </span>
                    </FormItem>
                    <FormItem {...formItemLayout} label="会员类型">
                  <span style={{fontSize: 22}}>
                  {
                    this.props.customer.customerType == null ? '未知' : this.props.customer.customerType
                  }
                  </span>
                    </FormItem>
                    <FormItem {...formItemLayout} label="会员折扣">
                    <span style={{fontSize: 28, color: 'green'}}>
                            {this.props.customer.customerType2 == null ? '原价' : this.props.customer.customerType2.discount * 10 + '折'}
                  </span>
                    </FormItem>
                    <FormItem {...formItemLayout} label="会员卡号">
                  <span style={{fontSize: 28}}>
                  {
                    this.props.customer.customerNo
                  }
                  </span>
                    </FormItem>
                    <FormItem {...formItemLayout} label="性别">
                      {
                        this.props.customer.gender == 'Male' ? '男' : this.props.customer.gender == 'Female' ? '女' : '未知'
                      }
                    </FormItem>

                  </Col>
                  <Col span={14}>
                    <FormItem {...formItemLayout} label="余额">
                  <span style={{fontSize: 28, color: 'red'}}>
                  ￥{this.props.customer.amount}
                  </span>
                    </FormItem>
                    <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>服务的员工</span>}>
                      {
                        <Select
                          showSearch
                          filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                          style={{width: 325}} onSelect={(value) => {
                          const state = this.state;
                          state.adminId = value;
                          this.setState(state);
                        }}>
                          <Select.Option key={0}>无服务对象</Select.Option>
                          {adminselects}
                        </Select>
                      }
                    </FormItem>
                    <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>付款金额</span>}>

                      {
                        <InputNumber placeholder="付款金额" onChange={(value) => {
                          const state = this.state;
                          state.amount = value;
                          this.setState(this.state);
                        }} style={{width: '200px'}} size="large" min={0} max={100000}
                                     precision={2} step={30}/>
                      }
                      <span style={{
                        color: 'red',
                        marginLeft: 5,
                        fontSize: 18
                      }}>金额范围:[ 0.00 - {this.props.customer.amount}]</span>
                    </FormItem>
                    <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>折后金额</span>}>
                  <span style={{fontSize: 28, color: 'green'}}>
                 ￥ {this.props.customer.customerType2 == null ? this.state.amount : (this.props.customer.customerType2.discount * this.state.amount).toFixed(2)}
                  </span>
                    </FormItem>
                    <Row>
                      <Popconfirm title={
                        <div>
                          <span style={{color: 'green', marginLeft: 5, fontSize: 18}}> 你确定要进行付款操作?         </span><br/>
                          <span
                            style={{
                              color: 'red',
                              marginLeft: 5,
                              fontSize: 15
                            }}>姓名: {this.props.customer.name}</span><br/>
                          <span style={{
                            color: 'red',
                            marginLeft: 5,
                            fontSize: 15
                          }}>金额(元): {(this.props.customer.customerType2.discount * this.state.amount).toFixed(2)} </span>
                        </div>

                      } onConfirm={() => {
                        if (this.state.amount === 0) {
                          message.error(<span style={{color: 'red', marginLeft: 5, fontSize: 18}}>金额不能为0.00</span>);
                          return;
                        }
                        ;
                        if ((this.props.customer.customerType2 == null ? this.state.amount : this.props.customer.customerType2.discount * this.state.amount) > this.props.customer.amount) {
                          message.error(<span
                            style={{color: 'red', marginLeft: 5, fontSize: 18}}>余额不足,请充值或者匿名收银</span>);
                          return;
                        }
                        ;
                        this.props.dispatch({
                          type: 'charge/e_pay',
                          payload: {
                            amount: this.state.amount,
                            customerId: this.props.customer.id,
                            adminId: this.state.adminId,
                          }
                        });
                      }} okText="是" cancelText="否">

                        <Button type="primary" style={{
                          width: '250px',
                          marginTop: '120px',
                          marginLeft: 1,
                          height: 60,
                          fontSize: 24,
                        }}>付款</Button>
                      </Popconfirm>
                    </Row>
                  </Col>
                </Row>
              }
            </TabPane>
            <TabPane tab={<span style={{marginLeft: 5, fontSize: 18}}>匿名收银</span>} key="anonyPay">
            {
              !this.state.showAnonyPay ? <Button style={{margin:'auto' }} type="primary" onClick={() => {
                  const state = this.state;
                  state.showAnonyPay = true;
                  state.anonyAmount = 0.00;
                  state.anonyAdminId = undefined;
                  this.setState(state);
                }}>匿名付款</Button> :

                <Row style={{
                  marginTop: '20px',
                  border: '1px solid #e9e9e9',
                  padding: '15px',
                  paddingTop: '40px',
                  paddingBottom: '70px'
                }}>
                  <Row>
                    <Col offset={6} span={18}>
                      <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>服务的员工</span>}>
                        {
                          <Select
                            showSearch
                            filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                            style={{width: 325}} onSelect={(value) => {
                            const state = this.state;
                            state.anonyAdminId = value;
                            this.setState(state);
                          }}>
                            <Select.Option key={0}>无服务对象</Select.Option>
                            {adminselects}
                          </Select>
                        }
                      </FormItem>
                      <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>付款金额</span>}>

                        {
                          <InputNumber placeholder="付款金额" onChange={(value) => {
                            const state = this.state;
                            state.anonyAmount = value;
                            this.setState(state);
                          }} style={{width: '200px'}} size="large" min={0} max={100000}
                                       precision={2} step={30}/>
                        }
                        <span style={{
                          color: 'red',
                          marginLeft: 5,
                          fontSize: 18
                        }}>金额范围:[ 0.00 - 100000]</span>
                      </FormItem>
                      <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>折后金额</span>}>
                  <span style={{fontSize: 28, color: 'green'}}>
                 ￥ {this.state.anonyAmount}
                  </span>
                      </FormItem>
                    </Col>
                  </Row>
                  <Row>
                    <Col offset={11}>
                      <Popconfirm title={
                        <div>
                            <span
                              style={{color: 'green', marginLeft: 5, fontSize: 18}}> 你确定要进行付款操作?         </span><br/>
                          <span style={{
                            color: 'red',
                            marginLeft: 5,
                            fontSize: 15
                          }}>金额(元): {this.state.anonyAmount} </span>
                        </div>

                      } onConfirm={() => {
                        if (this.state.anonyAmount === 0) {
                          message.error(<span style={{color: 'red', marginLeft: 5, fontSize: 18}}>金额不能为0.00</span>);
                          return;
                        }
                        ;
                        this.props.dispatch({
                          type: 'charge/e_pay',
                          payload: {
                            amount: this.state.anonyAmount,
                            adminId: this.state.anonyAdminId,
                          }
                        });
                        const state = this.state;
                        state.anonyAmount = 0.00;
                        state.anonyAdminId = undefined;
                        state.showAnonyPay = false;
                        this.setState(state);
                      }} okText="是" cancelText="否" style={{paddingLeft: 50, paddingRight: 50}}>

                        <Button type="primary" style={{
                          width: '250px',
                          marginTop: '80px',
                          height: 60,
                          fontSize: 24,
                        }}>付款</Button>
                      </Popconfirm>
                    </Col>
                  </Row>
                </Row>
            }
          </TabPane>
            <TabPane tab={<span style={{marginLeft: 5, fontSize: 18}}>商户出款</span>} key="outPay">
              {
                !this.state.showOutPay ? <Button style={{margin:'auto' }} type="primary" onClick={() => {
                    const state = this.state;
                    state.showOutPay = true;
                    state.outAmount = 0.00;
                    this.setState(state);
                  }}>商户现金出款</Button> :

                  <Row style={{
                    marginTop: '20px',
                    border: '1px solid #e9e9e9',
                    padding: '15px',
                    paddingTop: '40px',
                    paddingBottom: '70px'
                  }}>
                    <Row>
                      <Col offset={6} span={18}>

                        <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>出款金额</span>}>

                          {
                            <InputNumber placeholder="出款金额" onChange={(value) => {
                              const state = this.state;
                              state.outAmount = value;
                              this.setState(state);
                            }} style={{width: '200px'}} size="large" min={0} max={10000}
                                         precision={2} step={30}/>
                          }
                          <span style={{
                            color: 'red',
                            marginLeft: 5,
                            fontSize: 18
                          }}>金额范围:[ 0.00 - 10000]</span>
                        </FormItem>
                        <FormItem {...formItemLayout} label={<span style={{fontSize: 20, color: "green"}}>出款金额</span>}>
                  <span style={{fontSize: 28, color: 'red'}}>
                 ￥ {this.state.outAmount}
                  </span>
                        </FormItem>
                        <FormItem {...formItemLayout} label={<span style={{fontSize: 20}}>备注</span>}>
                          <Input.TextArea size="large" rows={5}  value={this.state.outComment} onChange={(e) => {
                            const state = this.state;
                            state.outComment = e.target.value;
                            this.setState(state);
                          }} style={{width: '400px'}}/>
                        </FormItem>
                      </Col>
                    </Row>
                    <Row>
                      <Col offset={11}>
                        <Popconfirm title={
                          <div>
                            <span
                              style={{color: 'green', marginLeft: 5, fontSize: 18}}> 你确定要进行出款操作?         </span><br/>
                            <span style={{
                              color: 'red',
                              marginLeft: 5,
                              fontSize: 15
                            }}>金额(元): {this.state.outAmount} </span>
                          </div>

                        } onConfirm={() => {
                          if (this.state.outAmount === 0) {
                            message.error(<span style={{color: 'red', marginLeft: 5, fontSize: 18}}>金额不能为0.00</span>);
                            return;
                          }
                          ;
                          this.props.dispatch({
                            type: 'charge/e_outPay',
                            payload: {
                              amount: this.state.outAmount,
                              comment:this.state.outComment
                            }
                          });
                          const state = this.state;
                          state.outAmount = 0.00;
                          state.showOutPay = false;
                          state.outComment=null,
                          this.setState(state);
                        }} okText="是" cancelText="否" style={{paddingLeft: 50, paddingRight: 50}}>

                          <Button type="primary" style={{
                            width: '250px',
                            marginTop: '80px',
                            height: 60,
                            fontSize: 24,
                            background:'red',
                          }}>出款</Button>
                        </Popconfirm>
                      </Col>
                    </Row>
                  </Row>
              }
            </TabPane>
          </Tabs>
          </div>
        </div>
      </MainUI>
    )
  };
}

function mapStateToProps(state) {
  return {
    customer: state.charge.payCustomer,
    admins: state.charge.admins,
  }
}

export default connect(mapStateToProps)(Form.create()(CustomerPay));
